<template>
  <container-wrapper>
    <el-row  :gutter="24" class="grid-container selected" 
            @click.stop="selectWidget(widget)">
       <gridColWidget></gridColWidget>
       <gridColWidget></gridColWidget>
    </el-row>
  </container-wrapper>
</template>

<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import ContainerWrapper from "./containerWrapper";
  import gridColWidget from "./gridColWidget.vue";
</script>

<style lang="scss" scoped>
  $--color-primary: #409EFF;
  .el-row.grid-container {
    min-height: 50px;
    //line-height: 48px;
    //padding: 6px;
    outline: 1px dashed #336699;

    .form-widget-list {
      min-height: 28px;
    }

  }

  .grid-container.selected, .grid-cell.selected {
    outline: 2px solid $--color-primary !important;
  }

</style>
